<template>
  <div class='customer-detail first-box'>
    <p class="title"><span>客户信息</span></p>
    <div>
      <p><span>姓名：</span><span>{{info.name}}</span></p>
      <p><span>性别：</span><span>{{info.sex}}</span></p>
      <p><span>出生日期：</span><span>{{info.birth}}</span></p>
      <p><span>联系电话：</span><span>{{info.phone | formatPhone}}</span></p>
      <p><span>车辆信息：</span><span class="fr"><img :src="imgs.right" alt="" class="right"></span></span></p>

      <p><span>保养详情：</span> <span v-show="!info.maintain.showDetail">暂无记录</span></p>
      <div v-show="info.maintain.showDetail" class="detail">
        <p>上次保养时间：{{info.maintain.starttime}}</p>
        <p>上次保养时间：{{info.maintain.endtime}}</p>
      </div>

      <p :class="{'no-border':info.repairinfo.showDetail}"><span>检修详情：</span><span>{{info.repairinfo.showDetail?"检修报告":"暂无记录"}}</span> <span class="fr go"><img class="right" :src="imgs.right" alt=""></span></p>
      <div v-show="info.repairinfo.showDetail" class="detail">
        <p>上次检修时间：{{info.repairinfo.starttime}}</p>
        <p>上次跟进时间：{{info.repairinfo.endtime}}</p>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      imgs:{
        right:require('../../../assets/img/vip/center/8.png')
      },
      info:{
        name:"张无忌",
        sex:"男",
        birth:"200-02-22",
        phone:"11234567811",
        carsinfo:{

        },
        maintain:{//保养信息
          showDetail:false,
          starttime:"2018-5-5",
          endtime:"2018-5-5"
        },
        repairinfo:{
          showDetail:true,
          starttime:"2018-5-5",
          endtime:"2018-5-5"
        }
      }
    };
  },
  filters:{
    formatPhone(val){
      return val.slice(0,3)+" "+val.slice(3,7)+" "+val.slice(7)
    }
  },
  methods: {},
  created() {}
};
</script>
<style lang="scss" scoped>
.customer-detail {
  padding: 0 15px;
  font-size: 14px;
  color: #333;

  .title{
    font-size: 12px;
    line-height: 30px;
    color: #999;
    box-sizing: border-box;
    border-bottom: 1px solid #f2f2f2;
  }
  >div{

    p{
      color: #999;
      padding: 10px 0;
      box-sizing: border-box;
      border-bottom: 1px solid #f2f2f2;

      span:nth-child(1){
        display: inline-block;
        min-width: 75px;
        color: #333;
      }
    }

    img.right{
      height: 20px;
    }

    .no-border{
      // border: none;
    }

    .detail{
      font-size: 12px;
      color: #999;
      
      p{
        padding: 0;
        text-indent: 10px;
        line-height: 30px;
      }
    }
  }
}
</style>